import React, { Component } from 'react';
import TabControl from './TabControl';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      titles: ['流行', '新款', '精选'],
      tabIndex: 0,
    }
  }
  
  tabChange(index) {
    this.setState({
      tabIndex: index
    })
  }

  getTabItem(item) {
    if (item === "流行")
      return <span>{item}</span>
    else if(item === "新款")
      return <button>{item}</button>
    else 
      return <i>{item}</i>
  }

  //记住：所有标签，都是element，所有element，都是对象，通过Javascript的回调函数可以完成许多事情~
  render() { 
    const {titles, tabIndex} = this.state;
    return ( 
      <div>
        <TabControl
          titles = {titles} 
          tabChange={index => this.tabChange(index)}
          //由子组件自己去决定传入的 element 中的内容
          // 传入一个回调函数, 该函数存在待传递的参数, 在子组件中调用回调函数传递参数, 然后获取携带参数内容的 element 即可
          // itemType = {item => <button>{item}</button>}
          // 还可以将回调函数复杂化, 使得内容更加灵活
          itemType={item => this.getTabItem(item)}
        />
        <h1>{titles[tabIndex]}</h1>
      </div>
     );
  }
}
 
export default App;